<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 顶部搜索区域 -->
      <el-row>
        <!-- 顶部左侧区域 -->
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="标签名称">
                <el-input v-model="formInline.user" placeholder=""></el-input>

              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="formInline.region" placeholder="请选择">
                  <el-option v-for='item in tagCondition' :key='item.id' :label="item.value" :value="item.id"></el-option>
                </el-select>

              </el-form-item>
              <el-form-item>
                <el-button @click="handleClear">清除</el-button>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>

        </el-col>
        <!-- 顶部右侧区域  -->
        <el-col :span="6">
          <div classe="grid-content bg-purple-light">
            <el-button type="success" icon="el-icon-edit" @click="showDialog = true">新增标签</el-button>
          </div>
        </el-col>
      </el-row>

      <!-- 中间数据提醒区域 -->
      <el-alert type="info" show-icon>数据一共{{total}}条</el-alert>

      <!-- 表格区域 -->
      <el-table :data="tagList" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="120" type="index" :index="handleIndex">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="120">
        </el-table-column>
        <el-table-column prop="tagName" label="标签名称" width="120">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="120">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="300">
          <template v-slot="{row}">
            {{ row.addDate | formatTime }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="700">
          <template v-slot="{row}">
            {{ row.state | conditionType }}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="150">
          <template v-slot="{row}">
            <el-button v-if="row.state ===1" @click="handleClick({id:row.id, state:row.state})" type="text" size="small">禁用</el-button>
            <el-button v-else @click="handleClick({id:row.id, state:row.state})" type="text" size="small">启用</el-button>
            <!-- 有问题 -->
            <el-button :disabled="row.state?true:false" type="text" size="small" @click='handleEdit(row)'>修改</el-button>
            <el-button :disabled="row.state?true:false" type="text" size="small" @click="handleDel(row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!-- 底部，分页区域 -->
      <div class="block">
        <el-pagination :page-sizes="[5, 10, 20, 50]" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.page" :page-size="queryParams.size" layout="->,prev, pager, next, sizes,jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>
    <tags-add :show-dialog.sync="showDialog" @uploadList="loadTagList" />
    <tags-edit :show-editdialog.sync="showEditdialog" :edit-form="EditForm" @uploadList="loadTagList" />
  </div>

</template>
<script>
import tagsAdd from '../components/tags-add.vue'
import tagsEdit from '../components/tags-edit'
import { list, remove, changeState } from '@/api/hmmm/tags'
import condition from '@/api/base/baseApi.js'

export default {
  name: 'tags',
  components: { tagsAdd, tagsEdit },
  data () {
    return {
      flag: true,
      // 定义状态值
      tagCondition: condition.status,
      // 是否禁用初始值
      disabled: false,
      // 标签列表初始值
      tagList: [],
      // 控制弹窗标志位
      showDialog: false,
      // 编辑弹窗标志位
      showEditdialog: false,
      // 顶部标签名称+状态
      formInline: {
        user: '',
        region: ''
      },
      total: 0,
      // 分页查询参数
      queryParams: {
        page: 1,
        pagesize: 10
      },
      AddForm: {},
      // 编辑功能父传子表单回显数据
      EditForm: {}
    }
  },
  methods: {
    // 搜索
    async handleSearch () {
      this.tagList = []
      try {
        console.log(this.formInline.user)
        let ret = []

        if (!this.formInline.region) {
          ret = await list({
            tagName: this.formInline.user
          })
        } else if (this.formInline.user === '') {
          ret = await list({
            state: Number(this.formInline.region)
          })
        } else {
          ret = await list({
            state: Number(this.formInline.region),
            tagName: this.formInline.user
          })
        }
        if (ret.status === 200) {
          console.log(ret)
          this.tagList = ret.data.items
          this.total = ret.data.counts
        }
      } catch (err) {
        console.dir(err)
      }
    },
    // 清除功能
    handleClear () {
      this.formInline.user = ''
      this.formInline.region = ''
    },
    // 编辑功能
    async handleEdit (row) {
      // 打开弹窗
      this.showEditdialog = true
      // 获取标签数据
      console.log(11, row)
      this.EditForm = row
    },
    // 禁用标签
    async handleClick ({ id, state }) {
      if (state) {
        state = 0
        // this.flag = true
      } else {
        state = 1
        // this.flag = false
      }
      try {
        const ret = await changeState({ id: id, state: state })
        if (ret.status === 200) {
          console.log(ret)
          this.loadTagList()
          this.$message.success('操作成功')
        }
      } catch {
        this.$message.error('标签状态修改失败')
      }
    },
    // 删除标签
    async handleDel (obj) {
      const ret = await this.$confirm('确认要删除该标签？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果点击了取消
      if (ret === 'cancel') return
      // 点击继续操作
      try {
        const res = await remove(obj)
        console.log(res)
        if (res.status === 200) {
          // 删除成功；刷新列表
          this.loadTagList()
          this.$message.success('删除标签成功')
        }
      } catch (error) {
        this.$message.error('删除标签失败')
      }
    },
    // 刷新表格数据
    uploadList () {
      this.loadTagList()
    },
    // 处理table序号
    handleIndex (index) {
      // 获取当前的page跟pagesize
      const { page, pagesize } = this.queryParams
      return (page - 1) * pagesize + 1 + index
    },
    // 获取标签表单数据列表
    async loadTagList () {
      const ret = await list(this.queryParams)
      this.tagList = ret.data.items
      this.total = ret.data.counts
    },
    // 每页N条
    handleSizeChange (size) {
      this.queryParams.pagesize = size
      this.loadTagList()
    },
    // 监听页码变化
    handleCurrentChange (page) {
      this.queryParams.page = page
      this.loadTagList()
    }
  },
  created () {
    this.loadTagList()
  }
}
</script>

<style scoped>
.main-container {
  margin: 20px;
  background-color: white;
}
</style>
